<template>
  <div>
    <div>
      <h2>Books Available</h2>
      <!-- 修改搜索框样式 -->
      <div class="search-container">
        <input type="text" v-model="searchKeyword" class="search-input" placeholder="Input keyword to search">
        <button @click="searchBooks" class="search-button">Search</button>
        <!-- 添加清空按钮 -->
        <span class="clear-input" @click="clearSearch">×</span>
      </div>
      <el-table :data="books" style="width: 100%">
        <el-table-column label="ISBN" prop="isbn"></el-table-column>
        <el-table-column label="Title" prop="bookname"></el-table-column>
        <el-table-column label="Total Quantity" prop="total"></el-table-column>
        <el-table-column label="Remaining Quantity" prop="remain"></el-table-column>
        <el-table-column label="Operation" width="100">
          <template slot-scope="scope">
            <el-button @click="borrowBook(scope.row)" type="primary" size="mini">Borrow</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 引入 BorrowConfirmation 组件 -->
    <BorrowConfirmation v-if="showConfirmation" @close="closeConfirmation" :selectedBook="selectedBook" />

  </div>
</template>

<script>
import BorrowConfirmation from "./BorrowConfirmation.vue"; // 根据实际路径修改

export default {
  name: "UserBookInfo",
  components: {
    BorrowConfirmation
  },
  data() {
    return {
      books: [],// 存储书籍数据
      searchKeyword: '', // 存储搜索关键字
      showConfirmation: false, // 控制是否显示 BorrowConfirmation 组件
      selectedBook: null // 存储当前选择的书籍信息
    };
  },
  mounted() {
    // 在组件挂载后立即调用 fetchBooks 方法获取书籍列表 
    this.fetchBooks();
  },
  methods: {
    // 发起网络请求获取书籍列表
    fetchBooks() {
      this.$request.get('/book/list')
      .then(response => {
        // 如果响应状态码不是 200，则抛出错误
        if (response.status !== 200) {
          throw new Error('Network response was not ok');
        }
        // 将返回的书籍列表存储到 books 数组中
        this.books = response.data.data;
      })
      .catch(error => {
        // 请求失败，输出错误信息
        console.error('获取书籍列表失败:', error);
      });
    },
    searchBooks() {
      this.$request.get(`/book/search?keyword=${this.searchKeyword}`)
      .then(response => {
        // 如果响应状态码不是 200，则抛出错误
        if (response.status !== 200) {
          throw new Error('Network response was not ok');
        }
        // 将返回的符合搜索条件的书籍列表存储到 books 数组中
        this.books = response.data.data;
      })
      .catch(error => {
        // 请求失败，输出错误信息
        console.error('搜索书籍失败:', error);
      });
    },
    updateBooks(){
      this.clearBooks();
      this.fetchBooks();
    },
    clearBooks(){
      this.books=[];
    },
    borrowBook(book) {
      this.selectedBook = book;
      this.showConfirmation = true;
    },
    closeConfirmation() {
      this.showConfirmation = false;
      this.selectedBook = null;
      this.updateBooks();
    },
    clearSearch() {
      this.searchKeyword = ''; // 清空搜索关键字
      this.updateBooks(); // 清空搜索后重新加载所有书籍
    }
  }
};
</script>

<style scoped>
/* 表格样式 */
.book-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.book-table th{
  color: rgb(255, 255, 255);
  background-color: #3d9afd;
  font-weight: bold;
  padding: 10px; /* 添加表头单元格内边距 */
}

.book-table td {
  padding: 10px;
  border: 1px solid #ffffff;
  text-align: center;
}

.book-table tbody tr:nth-child(even) {
  background-color: #f3f3f3;
}

/* 搜索框样式 */
.search-container {
  margin-bottom: 20px; /* 调整搜索框与表格之间的间距 */
  display: flex; /* 使用 Flex 布局 */
  align-items: center; /* 垂直居中 */
}

.search-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px; /* 调整搜索框与按钮之间的间距 */
  flex: 1; /* 搜索框占据剩余空间 */
}

.search-button, .clear-input {
  padding: 8px 16px;
  background-color: #3d9afd;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-button:hover, .clear-input:hover {
  background-color: #357ebd;
}

.clear-input {
  margin-left: 5px; /* 添加清空按钮与搜索按钮之间的间距 */
}
</style>